import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'easyFlowMixin'
})

export default class extends Vue {
  [x: string]: any

  public jsplumbSetting = {
    Anchors: ['Top', 'TopCenter', 'TopRight', 'TopLeft', 'Right', 'RightMiddle', 'Bottom', 'BottomCenter', 'BottomRight', 'BottomLeft', 'Left', 'LeftMiddle'],
    Container: 'efContainer',
    Connector: ['Flowchart', { stub: 10, gap: 1, alwaysRespectStubs: true, midpoint: 0.5, cornerRadius: 10 }],
    // Connector: ['Straight', { stub: 25, gap: 1 }],
    // Connector: ['Bezier', { curviness: 100 }],
    // Connector: ['StateMachine', { margin: 5, curviness: 10, proximityLimit: 80 }],
    ConnectionsDetachable: true,
    DeleteEndpointsOnDetach: false,
    Endpoint: ['Dot', { radius: 3, cssClass: 'ef-dot', hoverClass: 'ef-dot-hover' }],
    EndpointStyle: { fill: '#8D9DB0', outlineWidth: 1 },
    LogEnabled: true,
    PaintStyle: {
      // 线的颜色
      stroke: '#8D9DB0',
      // 线的粗细，值越大线越粗
      strokeWidth: 3,
      // 设置外边线的颜色，默认设置透明，这样别人就看不见了，点击线的时候可以不用精确点击
      outlineStroke: 'transparent',
      // 线外边的宽，值越大，线的点击范围越大
      outlineWidth: 3
    },
    DragOptions: { cursor: 'pointer', zIndex: 2000 },
    Overlays: [
      // 箭头叠加
      ['Arrow', {
        width: 12, // 箭头尾部的宽度
        length: 8, // 从箭头的尾部到头部的距离
        location: 1, // 位置，建议使用0～1之间
        direction: 1, // 方向，默认值为1（表示向前），可选-1（表示向后）
        foldback: 1 // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
      }],
      ['Label', {
        label: '',
        location: 0.1,
        cssClass: 'aLabel'
      }]
    ],
    RenderMode: 'canvas',
    HoverPaintStyle: { stroke: '#b0b2b5', strokeWidth: 3 },
    // 滑过锚点效果
    // EndpointHoverStyle: {fill: 'red'}
    Scope: 'jsPlumb_DefaultScope' // 范围，具有相同scope的点才可连接
  }
  /**
   * 连线参数
   */

  public jsplumbConnectOptions = {
    isSource: true,
    isTarget: true,
    // 动态锚点、提供了4个方向 Continuous、AutoDefault
    anchor: 'AutoDefault',
    // 设置连线上面的label样式
    labelStyle: {
      cssClass: 'flowLabel'
    },
    emptyLabelStyle: {
      cssClass: 'emptyFlowLabel'
    }
  }

  /**
   * 源点配置参数
   */
  public jsplumbSourceOptions = {
    // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
    filter: '.flow-node-drag',
    filterExclude: false,
    anchor: 'Top',
    // 是否允许自己连接自己
    allowLoopback: false,
    // -1不设连线限制
    // maxConnections: 1,
    onMaxConnections: (info, e) => {
      console.log(`超过了最大值连线: ${info.maxConnections}`)
    }
  }

  public jsplumbSourceOptions2 = {
    // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
    filter: '.flow-node-drag',
    filterExclude: false,
    // anchor: 'Continuous',
    // 是否允许自己连接自己
    allowLoopback: true,
    connector: ['Flowchart', { curviness: 50 }],
    connectorStyle: {
      // 线的颜色
      stroke: 'red',
      // 线的粗细，值越大线越粗
      strokeWidth: 1,
      // 设置外边线的颜色，默认设置透明，这样别人就看不见了，点击线的时候可以不用精确点击
      outlineStroke: 'transparent',
      // 线外边的宽，值越大，线的点击范围越大
      outlineWidth: 10
    },
    connectorHoverStyle: { stroke: 'red', strokeWidth: 2 }
  }

  public jsplumbTargetOptions = {
    // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
    filter: '.flow-node-drag',
    filterExclude: false,
    // 是否允许自己连接自己
    anchor: ['Continuous', { faces: ['Top'] }],
    allowLoopback: false,
    dropOptions: { hoverClass: 'ef-drop-hover' }
  }
}
